<template>
  <div class="header">
    <div class="logo">
      <img src="@/assets/img/blog-logo.png" alt="" srcset="" />
    </div>
    <div class="nav">
      <ul>
        <li>欢迎您：{{ user }}</li>
        <li @click="exit">安全退出</li>
      </ul>
    </div>
  </div>
</template>


<script lang="ts" setup>
import router from "@/router";
import { ref } from "vue";

const user = ref(localStorage.getItem("user"));

const exit = () => {
  localStorage.removeItem("user");
  router.push("/login");
};
</script>

<style lang="scss" scoped>
.header {
  width: 100%;
  height: 60px;
  line-height: 60px;
  background-color: #e3e3e3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .logo {
    width: 180px;
    height: 50px;
    margin-left: 20px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .nav {
    ul {
      display: flex;
      justify-content: flex-start;
      list-style-type: none;
      li {
        margin-right: 20px;
        font-size: 15px;
        color: #626468;
      }
      li:last-child {
        cursor: pointer;
      }
      li:last-child:hover {
        color: #999;
      }
    }
  }
}
</style>
